<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rating | TailGrids</title>
    <link
      rel="shortcut icon"
      href="../../assets/images/favicon.svg"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="../../assets/css/tailwind.css" />
  </head>
  <body>
    <!-- ====== Rating Start -->
    <section class="bg-gray-2 py-20 dark:bg-dark">
      <div class="container">
        <div class="mx-auto w-full max-w-[470px]">
          <div
            class="overflow-hidden rounded-lg bg-white px-8 py-10 text-center shadow-three lg:mb-0 xl:px-[60px] dark:bg-dark-2 dark:shadow-box-dark"
          >
            <h3
              class="mb-5 font-semibold text-dark lg:text-2xl xl:text-[28px] xl:leading-[1.43] dark:text-white"
            >
              Customer reviews
            </h3>
            <div
              class="inline-flex flex-wrap items-center justify-center gap-4 rounded-md border-[.5px] border-stroke bg-gray-1 px-6 py-[10px] dark:border-dark-3 dark:bg-dark"
            >
              <div class="flex items-center">
                <span class="mr-1">
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clip-path="url(#clip0_1008_11877)">
                      <path
                        d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
                        fill="#FFA645"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1008_11877">
                        <rect width="20" height="20" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                </span>
                <span class="mr-1">
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clip-path="url(#clip0_1008_11877)">
                      <path
                        d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
                        fill="#FFA645"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1008_11877">
                        <rect width="20" height="20" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                </span>
                <span class="mr-1">
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clip-path="url(#clip0_1008_11877)">
                      <path
                        d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
                        fill="#FFA645"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1008_11877">
                        <rect width="20" height="20" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                </span>
                <span class="mr-1">
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clip-path="url(#clip0_1008_11877)">
                      <path
                        d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
                        fill="#FFA645"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1008_11877">
                        <rect width="20" height="20" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                </span>
                <span class="mr-1">
                  <svg
                    width="20"
                    height="20"
                    viewBox="0 0 20 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clip-path="url(#clip0_1008_11877)">
                      <path
                        d="M18.6562 7.46875L12.9999 6.59375L10.4375 1.21875C10.25 0.84375 9.74995 0.84375 9.56245 1.21875L6.99995 6.625L1.37495 7.46875C0.9687 7.53125 0.81245 8.0625 1.12495 8.34375L5.2187 12.5625L4.24995 18.4687C4.18745 18.875 4.5937 19.2188 4.9687 18.9688L10.0624 16.1875L15.1249 18.9688C15.4687 19.1563 15.9062 18.8437 15.8124 18.4687L14.8437 12.5625L18.9374 8.34375C19.1874 8.0625 19.0624 7.53125 18.6562 7.46875Z"
                        fill="#FFA645"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1008_11877">
                        <rect width="20" height="20" fill="white" />
                      </clipPath>
                    </defs>
                  </svg>
                </span>
              </div>
              <span class="text-base font-medium text-dark dark:text-white">
                4.7 out of 5
              </span>
            </div>
            <p
              class="pb-10 pt-3 text-base font-medium text-body-color dark:text-dark-6"
            >
              40 customer ratings
            </p>
            <div class="space-y-4">
              <div class="flex items-center justify-between">
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  5 star
                </span>
                <div
                  class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
                >
                  <div
                    class="absolute left-0 top-0 h-full w-[84%] rounded-full bg-[#FFA645]"
                  ></div>
                </div>
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  84%
                </span>
              </div>
              <div class="flex items-center justify-between">
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  4 star
                </span>
                <div
                  class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
                >
                  <div
                    class="absolute left-0 top-0 h-full w-[50%] rounded-full bg-[#FFA645]"
                  ></div>
                </div>
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  9%
                </span>
              </div>
              <div class="flex items-center justify-between">
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  3 star
                </span>
                <div
                  class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
                >
                  <div
                    class="absolute left-0 top-0 h-full w-[40%] rounded-full bg-[#FFA645]"
                  ></div>
                </div>
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  4%
                </span>
              </div>
              <div class="flex items-center justify-between">
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  2 star
                </span>
                <div
                  class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
                >
                  <div
                    class="absolute left-0 top-0 h-full w-[20%] rounded-full bg-[#FFA645]"
                  ></div>
                </div>
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  2%
                </span>
              </div>
              <div class="flex items-center justify-between">
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  1 star
                </span>
                <div
                  class="relative mx-3 h-[14px] w-full rounded-full bg-gray-2 dark:bg-dark"
                >
                  <div
                    class="absolute left-0 top-0 h-full w-[10%] rounded-full bg-[#FFA645]"
                  ></div>
                </div>
                <span
                  class="whitespace-nowrap text-base font-medium text-dark dark:text-white"
                >
                  1%
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ====== Rating End -->
  </body>
</html>
